<template>
  <div>
    <el-button v-print="print" icon="el-icon-printer">打印</el-button>

    <div id="printArea">
      <table
        cellspacing="0"
        cellpadding="0"
        border="0"
        class="fs13"
        style="width: 100%"
      >
        <tr>
          <!-- <td colspan="3"></td> -->
        </tr>
        <tr>
          <td colspan="3" class="tl" style="vertical-align: bottom"></td>
          <td colspan="18" height="40" class="tc" style="font-size: 25px">
            长春众升科技发展有限公司
          </td>
          <td colspan="3" class="tl" style="vertical-align: bottom"></td>
        </tr>
        <tr>
          <td colspan="3" class="tl" style="height: 20px"></td>
        </tr>
        <tr>
          <td colspan="3" class="tl" style="vertical-align: bottom"></td>
          <td colspan="18" class="tc fw700" style="font-size: 20px">
            物料领用清单
          </td>
          <td colspan="3"></td>
        </tr>
        <tr>
          <td colspan="3" class="tr fw700" style="height: 30px">出库单号:</td>
          <td colspan="6">{{ products.invOutboundBill.vBillNo }}</td>
          <td colspan="8"></td>
          <td colspan="3" class="tr fw700">领料人:</td>
          <td colspan="4">{{ products.invOutboundBill.applyBy }}</td>
        </tr>
        <tr>
          <td colspan="3" class="fw700 tr" style="height: 30px">项目号:</td>
          <td colspan="6">
            {{ products.invOutboundBill.vProjectNo }}
          </td>
          <td colspan="8"></td>
          <td colspan="3" class="tr fw700">领用时间:</td>
          <td colspan="4">{{ products.invOutboundBill.dExecute }}</td>
        </tr>

        <tr>
          <td colspan="24" class="tl" style="height: 20px"></td>
        </tr>

        <tr>
          <td colspan="3" class="tc fw700 bor-t bor-b bor-r">采购单号</td>
          <td colspan="5" class="tc fw700 bor-t bor-l bor-b bor-r">物料名称</td>
          <td colspan="5" class="tc fw700 bor-t bor-b bor-r">规格型号</td>
          <td colspan="4" class="tc fw700 bor-t bor-b bor-r">出库数量</td>
          <td colspan="3" class="tc fw700 bor-t bor-b bor-r">位 置</td>
          <td colspan="3" class="tc fw700 bor-t bor-b bor-r">备 注</td>
        </tr>
        <tr v-for="x in products.invOutboundBillItemList">
          <td
            colspan="3"
            class="bor-l bor-t bor-b bor-r"
            style="text-align: center"
          >
            {{ x.vBuyNo }}
          </td>
          <td colspan="5" class="bor-t bor-b bor-r" style="text-align: center">
            {{ x.vSpaName }}
          </td>
          <td colspan="5" class="bor-t bor-b bor-r" style="text-align: center">
            {{ x.vSpaModel }}
          </td>
          <td colspan="4" class="bor-t bor-b bor-r" style="text-align: center">
            {{ x.nQty }}
          </td>
          <td colspan="3" class="bor-t bor-b bor-r" style="text-align: center">
            {{ x.vLocationName }}
          </td>
          <td
            colspan="3"
            class="bor-t bor-b bor-r"
            style="text-align: center"
          ></td>
        </tr>
        <tr>
          <td colspan="3" style="height: 50px"></td>
        </tr>
        <tr>
          <td colspan="3"></td>
          <td colspan="7"></td>
          <td colspan="6"></td>
          <td colspan="3">库管员:</td>
          <td colspan="5"></td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  props: ["products"],
  emits: ["close"],
  data() {
    let that = this;
    return {
      // products: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      msg: "Welcome to Your Vue.js App",
      print: {
        id: "printArea",
        popTitle: "配置页眉标题", // 打印配置页上方的标题
        // extraHead: "打印", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: true, // 是否启动预览模式，默认是false
        previewTitle: "预览的标题", // 打印预览的标题
        previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback() {
          console.log("正在加载预览窗口！");
          console.log(that.msg, this);
        }, // 预览窗口打开之前的callback
        previewOpenCallback() {
          console.log("已经加载完预览窗口，预览打开了！");
        }, // 预览窗口打开时的callback
        beforeOpenCallback() {
          console.log("开始打印之前！");
        }, // 开始打印之前的callback
        openCallback() {
          console.log("执行打印了！");
        }, // 调用打印时的callback
        closeCallback() {
          console.log("关闭了打印工具！");
        }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() {
          console.log("点击v-print绑定的按钮了！");
        },

        standard: "",
        extarCss: "",
      },
    };
  },

  created() {},
};
</script>
<style scoped>
.tc {
  text-align: center;
}
.fw700 {
  font-weight: 700;
}
.tr {
  text-align: right;
}

.bor {
  border: 1px solid #000;
}
.bor-t {
  border-top: 1px solid #000;
}
.bor-b {
  border-bottom: 1px solid #000;
}
.bor-l {
  border-left: 1px solid #000;
}
.bor-r {
  border-right: 1px solid #000;
}
.no-bor {
  border: none !important;
}

.fs13 {
  font-size: 13px;
}
</style>
